<!DOCTYPE html>

<html xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <title></title>

    <link rel="stylesheet" th:href="@{/css/layui.css}" />

    <link rel="stylesheet" th:href="@{/css/main.css}" />

    <style>
        .th_type{
            width: 30px;
        }
        .th_brand{
            width: 80px;
        }
        .th_mode_code{
            width: 70px;
        }
        .th_count{
            width: 45px;
        }
        .th_price{
            width: 60px;
        }
        .th_discountPorice{
            width: 65px;
        }
        .storedetails .layui-table th{
            padding:9px 1px;
            text-align: center;
        }
        .listorder-msg .indent-list a{
            padding: 10px 2px;
            text-align: center;
        }
        .listorder-msg .indent-list td{
            text-align: center;
            height: 60px;
        }
        .fl{
            float: left;
        }
        .btn_close span{
            text-align: center;
            color: #fff;
            display: inline-block;
            height: 28px;
            width: 144px;
            margin-left: 20px;
            border: #1AAD19 solid 1px;
            line-height: 28px;
            background-color: #1AAD19;
        }
        .btn_close{
            margin-top: 30px;
        }
        .goods {
            margin-top: 5px;
        }

        .pic {
            width: 108px;
            height: 100px;
            background: url(image/Icon_Default_productr.png) no-repeat;
            background-size: 100% 100%;
            position: relative;
        }

        .goods-name {
            width: 30%;
            text-align: center;
            color: #fff;
            background: rgba(0, 95, 138, 0.4);
            padding: 0 6px;
            position: absolute;
            bottom: 0;
            left: 0;
        }

        .goods-item {
            display: flex;
            position: relative;
            margin-bottom: 5px;
            background: #fff;
            padding: 5px 10px;
            box-sizing: border-box;
        }


        .goods-detail {
            margin-left: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .price {
            display: flex;
            justify-content: space-between;
            padding-right: 22px;
            margin-top: 10px;
        }

        .money {
            color: #FB5824;
        }

        .more {
            position: absolute;
            right: 12px;
            top: 50px;
        }

        .discount {

            color: #FC3433;
            /*width: 43px;*/
            height: 23px;
            line-height: 23px;
            text-align: center;
            white-space: nowrap;
        }

        .pinpai {
            display: flex;
            justify-content: space-between;
            padding-right: 5px;
        }

        .totalBox {


            /* box-sizing: border-box; */
        }

        .totalBox div {
            min-height: 40px;
        }

        .jianshu {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            align-items: center;
            background: #fff;
            padding: 0 10px;
        }

        .status i {

            vertical-align: middle;
            display: inline-block;
            width: 20px;
            height: 18px;
            background: url(image/store2.png) no-repeat;
            background-size: 100% 100%;
        }

        .status {
            color: #FB5824;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 3px;
            background: #fff;
            padding: 0 10px;
        }

        .total {
            display: flex;
            justify-content: space-between;
            font-weight: bold;
            align-items: center;
            background: #fff;
            padding: 0 10px;
            margin-top: 3px;
        }
    </style>

</head>

<body>

<div class="listorder-msg">
    <table class="layui-table" lay-skin="nob">
        <tr class="storeTr">
            <td colspan="2" class="storeName"><span class="store-icon"></span><span th:text="${info.getStore_name()}">辛思奇的店</span></td>
            <td class="storeState"><span class="pass-border" th:text="${info.getTypename()}">退</span></td>
        </tr>
        <tr>
            <td colspan="2" th:text="'单号：'+${info.getIty_Number()}">单号：6829580500021</td>

            <td th:text="'建立人：'+${info.getIty_operatPerson2name()}">建立人：陈雷</td>
        </tr>
        <tr>
            <td colspan="2" th:text="'创建时间：'+${#dates.format(info.getIty_date(),'yyyy-MM-dd HH:mm:ss')}">创建时间：2018-11-19 16:44:12</td>
            <td th:text="'商品件数：'+${info.getIty_operatPerson1()}+'件'">商品件数：1件</td>
        </tr>
    </table>
    <div class="storedetails">
        <div class="goods" th:each="goods:${info.getList()}">
            <a class="show_counts" th:href="@{'/GoodsDetail?goodsinfo='+${goods.getJsonObject()}}">
                <div class="goods-item">
                    <div class="pic">
                        <p class="goods-name">
                            <span data-translation="Frame" th:text="${goods.getType()}">镜架</span>
                        </p>
                    </div>
                    <div class="goods-detail">
                        <div class="pinpai">
                            <p th:text="'品牌/型号：'+${goods.getBrand()}">品牌/型号：暴龙;F;BJ6013;</p>
                        </div>
                        <p th:text="'球柱镜/色号/规格：'+${goods.getColorNumber()}">球柱镜/色号/规格：B30酒红</p>                                <!---->
                        <!---->
                        <div class="price">
                            <p class="money" th:text="'价格：'+${goods.getPrice()}">价格：￥558</p>
                            <p th:text="${goods.getNumbers()}+'只'">1只</p>
                        </div>
                    </div>
                    <div class="more">》</div>
                </div>
            </a>
        </div>
        <div class="totalBox">
            <div class="total">
                <p th:text="'总金额：￥'+(${info.getIty_paidPrice()}+info.getIty_unpaidPrice())">总金额: ¥558</p>
            </div>
            <div class="status">
						<span th:text="'状态: '+${info.getStatus()}">
							<i></i>&nbsp;状态: 待审核</span>
            </div>
        </div>
        <div class="btn_close" th:switch="${info.getStatus()}">
            <span  class="disagree" th:case="'待审核'">审核不通过</span>
            <span  class="agree" th:case="'待审核'">审核通过</span>
        </div>    </div>
</div>
</body>
</html>